import React from 'react'
import { 
  Search,
  Plus,
  BookmarkPlus,
  Bell,
  BarChart3,
  Settings
} from 'lucide-react'

export function QuickActions() {
  const actions = [
    {
      icon: <Search className="h-5 w-5" />,
      label: 'Browse Papers',
      description: 'Explore the latest research',
      href: '/app/browse',
      color: 'bg-blue-50 text-blue-600 border-blue-200'
    },
    {
      icon: <Plus className="h-5 w-5" />,
      label: 'Create Alert',
      description: 'Get notified about new papers',
      href: '/app/settings?tab=alerts',
      color: 'bg-green-50 text-green-600 border-green-200'
    },
    {
      icon: <BookmarkPlus className="h-5 w-5" />,
      label: 'Saved Papers',
      description: 'Access your library',
      href: '/app/library',
      color: 'bg-purple-50 text-purple-600 border-purple-200'
    },
    {
      icon: <BarChart3 className="h-5 w-5" />,
      label: 'Analytics',
      description: 'View reading insights',
      href: '/app/analytics',
      color: 'bg-orange-50 text-orange-600 border-orange-200'
    },
    {
      icon: <Bell className="h-5 w-5" />,
      label: 'Notifications',
      description: 'Check alerts and updates',
      href: '/app/notifications',
      color: 'bg-red-50 text-red-600 border-red-200'
    },
    {
      icon: <Settings className="h-5 w-5" />,
      label: 'Preferences',
      description: 'Customize your experience',
      href: '/app/settings',
      color: 'bg-gray-50 text-gray-600 border-gray-200'
    }
  ]

  return (
    <div className="bg-white rounded-lg border border-gray-200 p-6">
      <h3 className="text-lg font-semibold text-gray-900 mb-4">Quick Actions</h3>
      <div className="grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 gap-4">
        {actions.map((action) => (
          <button
            key={action.label}
            onClick={() => window.location.href = action.href}
            className="p-4 border rounded-lg hover:shadow-sm transition-shadow text-left group"
          >
            <div className={`inline-flex p-2 rounded-lg ${action.color} mb-3`}>
              {action.icon}
            </div>
            <h4 className="font-medium text-gray-900 group-hover:text-blue-600">
              {action.label}
            </h4>
            <p className="text-sm text-gray-600 mt-1">
              {action.description}
            </p>
          </button>
        ))}
      </div>
    </div>
  )
}